<template>
    <div>
        <van-nav-bar title="评价他人">
            <template #right>
                <div class="top-btn">
                    <van-button type="primary" block size="mini" @click="show = true;">提交</van-button>
                </div>
            </template>
            <template #left>
                <a>取消</a>
            </template>
        </van-nav-bar>
        <div class="fixed-box" v-if="show">
            <div class="success-modal">
                <van-icon name="cross" class="icon-close" />
                <div class="success-modal-content">
                    <img src="@/assets/images/icon-success.png" />
                    <div class="text">点评已完成</div>
                    <p>你对潘辰辰的评分：</p>
                    <div class="success-modal-rate">
                        <div>
                            <p>企业文化</p>
                            <van-rate v-model="ratex1" :size="12" color="#FDAA01" void-icon="star" void-color="#FFE7C6" />
                        </div>
                        <div>
                            <p>沟通能力</p>
                            <van-rate v-model="ratex2" :size="12" color="#FDAA01" void-icon="star" void-color="#FFE7C6" />
                        </div>
                        <div>
                            <p>业务能力</p>
                            <van-rate v-model="ratex3" :size="12" color="#FDAA01" void-icon="star" void-color="#FFE7C6" />
                        </div>
                    </div>
                    <van-button type="primary" block to="/otherDetail">查看详情</van-button>
                </div>
            </div>
        </div>
        <div class="self-evaluation">
            <div class="evaluation-top">
                <div class="user-top">
                    <div class="user-avatar">
                        <img src="@/assets/1.jpg" />
                    </div>
                    <div class="user-info">
                        <h3>潘辰辰<span>24岁</span></h3>
                        <p>产品设计部-产品经理<span>入职1月，入职月薪20000</span></p>
                    </div>
                </div>
                <div class="last-month">
                    <div class="box-title">TA上月(4月)的工作表现</div>
                    <table class="box-table" cellspacing="1">
                        <tr>
                            <th>排名</th>
                            <th>影响力</th>
                            <th>皇冠</th>
                            <th>鲜花</th>
                            <th>炸弹</th>
                        </tr>
                        <tr>
                            <td>2/9</td>
                            <td>53%</td>
                            <td>5</td>
                            <td>12</td>
                            <td>5</td>
                        </tr>
                        <tr>
                            <th>牛头</th>
                            <th>猪头</th>
                            <th>本职薪资</th>
                            <th>招聘奖金</th>
                            <th>额外奖金</th>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>5</td>
                            <td>15000</td>
                            <td>15000</td>
                            <td>5000</td>
                        </tr>
                        <tr>
                            <th colspan="2">薪资合计</th>
                            <td colspan="3" class="strong">35000(元)</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="evaluation-rates evaluation-box">
                <div class="box-title">TA的综合能力自评</div>
                <div class="merits-type"><span class="circle-merits">优点</span><span class="circle-demerits">缺点</span></div>
                <v-chart id="rateline" :option="option" />

                <div class="evaluation-rate">
                    <div class="user-rate">
                        <div class="user-rate-1">
                            <div>
                                <p>企业文化</p>
                                <van-rate v-model="ratex1" :size="14" color="#FDAA01" void-icon="star" void-color="#FFE7C6" />
                            </div>
                            <div>
                                <p>沟通能力</p>
                                <van-rate v-model="ratex2" :size="14" color="#FDAA01" void-icon="star" void-color="#FFE7C6" />
                            </div>
                            <div>
                                <p>业务能力</p>
                                <van-rate v-model="ratex3" :size="14" color="#FDAA01" void-icon="star" void-color="#FFE7C6" />
                            </div>
                        </div>
                        <div class="user-rate-2">
                            <slider-rate v-model="rate4" readonly bar-height="16px" bar-radius="8px"></slider-rate>
                        </div>
                        <div class="user-rate-3">
                            <div class="merits-text">
                                <p class="title">优点自述：</p>
                                <p class="content">善于沟通，协调同事关系，积极参与部门项目规划，进行产品设计。</p>
                            </div>
                            <div class="demerits-text">
                                <p class="title">缺点自述：</p>
                                <p class="content">朋友圈分享太少，与新新的交流还要进一步</p>
                            </div>
                        </div>
                    </div>
                    <div class="user-rate-title">
                        我来评价TA
                    </div>
                    <div class="evaluation-rate-star">
                        <div class="form-title">1、企业文化<span>*</span></div>
                        <van-rate v-model="rate1" :size="24" color="#FDAA01" void-icon="star" void-color="#DDDDDD" />
                    </div>
                    <div class="evaluation-rate-star">
                        <div class="form-title">2、沟通能力<span>*</span></div>
                        <van-rate v-model="rate2" :size="24" color="#FDAA01" void-icon="star" void-color="#DDDDDD" />
                    </div>
                    <div class="evaluation-rate-star">
                        <div class="form-title">3、业务能力<span>*</span></div>
                        <van-rate v-model="rate3" :size="24" color="#FDAA01" void-icon="star" void-color="#DDDDDD" />
                    </div>
                    <div class="evaluation-rate-input">
                        <div class="form-title">4、优点</div>
                        <van-field v-model="merits" type="textarea" placeholder="点击填写优点" maxlength="300" show-word-limit style="background:#F8F8F8;" />
                    </div>
                    <div class="evaluation-rate-input">
                        <div class="form-title">5、缺点</div>
                        <van-field v-model="demerits" type="textarea" placeholder="点击填写缺点" maxlength="300" show-word-limit style="background:#F8F8F8;" />
                    </div>
                    <div class="evaluation-rate-input">
                        <slider-rate v-model="rate4" bar-height="16px" bar-radius="8px"></slider-rate>
                        <p class="evaluation-rate-message">可左右拖动血条，选择优缺点占比</p>
                    </div>
                </div>
            </div>
            <div class="evaluation-work evaluation-box">
                <div class="box-title">TA的本职工作成绩</div>
                <v-chart id="rateline" :option="option2" />
                <div class="evaluation-task">
                    <div class="evaluation-wish">
                        TA本月期望的本职薪资是：20000元
                    </div>
                    <task-finish-item></task-finish-item>
                </div>
                <div class="evaluation-money">
                    <label>我觉得TA本月该拿的本职薪资<font color="#FF3B30">*</font><br /><span>(TA自己期望20000元)</span></label>
                    <div>
                        <van-field v-model="money" style="background:#F8F8F8;border-radius:8px;" placeholder="填写月薪(元)" />
                    </div>
                </div>
            </div>
            <div class="evaluation-recruit evaluation-box">
                <div class="box-title">TA的组织建设成绩</div>
                <v-chart id="rateline" :option="option3" />
                <div class="recruit-table">
                    <table class="box-table" cellspacing="1">
                        <tr>
                            <th width="17%">面试</th>
                            <td width="33%">5</td>
                            <th width="17%">淘汰</th>
                            <td width="33%">2</td>
                        </tr>
                        <tr>
                            <th>入职</th>
                            <td>2 <span>奖励：3000</span></td>
                            <th>主动离职</th>
                            <td>0</td>
                        </tr>
                        <tr>
                            <th>转正</th>
                            <td>2<span>奖励：1000</span></td>
                            <th>升级</th>
                            <td>0</td>
                        </tr>
                        <tr>
                            <th>合格</th>
                            <td>1<span>奖励：1000</span></td>
                            <th>降职</th>
                            <td>2</td>
                        </tr>
                        <tr>
                            <td colspan="4">招聘奖金合计：5000(元)</td>
                        </tr>
                    </table>
                </div>
                <div class="evaluation-recruit-list">
                    <task-finish-item></task-finish-item>
                </div>
            </div>
            <div class="evaluation-reward evaluation-box">
                <div class="box-title">TA的额外贡献</div>
                <v-chart id="rateline" :option="option3" />
                <div class="evaluation-task">
                    <div class="evaluation-wish">
                        TA本月期望的额外奖金是：8000元
                    </div>
                    <task-finish-item></task-finish-item>
                </div>
                <div class="evaluation-money">
                    <label>我觉得TA本月该拿的额外奖金<font color="#FF3B30">*</font><br /><span>(TA自己期望8000元)</span></label>
                    <div>
                        <van-field v-model="money2" style="background:#F8F8F8;border-radius:8px;" placeholder="填写奖金(元)" />
                    </div>
                </div>
            </div>
            <div class="evaluation-box">
                <evaluation-comment></evaluation-comment>
            </div>
        </div>

        <van-tabbar route>
            <van-tabbar-item to="/">
                <span>任务大厅</span>
                <template #icon>
                    <img src="@/assets/images/icon1.png" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/evaluation">
                <span>点评圈</span>
                <template #icon>
                    <img src="@/assets/images/icon2x.png" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/message">
                <span>消息</span>
                <template #icon>
                    <img src="@/assets/images/icon3.png" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { ref } from "vue";
import { Button, Icon, NavBar, Tabbar, TabbarItem, Rate, Field } from "vant";
// import httpRequest from "../../util/httpRequest";
import { useStore } from "vuex";
import util from "@/util/baseUtil";
import SliderRate from "@/components/sliderRate";
import taskFinishItem from "@/components/task/taskFinishItem";
import evaluationComment from "@/components/evaluation/evaluation-comment";
export default {
    components: {
        [Button.name]: Button,
        [Icon.name]: Icon,
        [NavBar.name]: NavBar,
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem,
        [Rate.name]: Rate,
        [Field.name]: Field,
        SliderRate,
        taskFinishItem,
        evaluationComment,
    },
    setup() {
        const currentDate = ref(new Date());
        const timer1 = ref(30 * 60 * 60 * 1000);
        const timer2 = ref(80 * 60 * 60 * 1000);
        const showPicker = ref(false);
        const formatter = (type, val) => {
            if (type === "year") {
                return `${val}年`;
            }
            if (type === "month") {
                return `${val}月`;
            }
            return val;
        };
        const openPicker = () => {
            showPicker.value = true;
        };
        return {
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 10, 1),
            formatter,
            currentDate,
            showPicker,
            openPicker,
            timer1,
            timer2,
        };
    },
    data() {
        return {
            checked: false,
            navActive: 1,
            store: useStore(),
            date: null,
            name: "",
            rate1: 0,
            rate2: 0,
            rate3: 0,
            rate4: 55,
            ratex1:4,
            ratex2:4,
            ratex3:5,
            myRateLine: null,
            option: {},
            option2: {},
            option3: {},
            merits: "",
            demerits: "",
            money: "",
            money2: "",
            show: false,
        };
    },
    // 注意：组件挂载后才能访问到 ref 对象
    mounted() {
        this.option = {
            tooltip: {
                trigger: "axis",
                formatter: function(params) {
                    let text =
                        params[0].axisValue +
                        "<br><span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#576B95;'></span>" +
                        params[0].seriesName +
                        ":" +
                        params[0].value +
                        "<br><span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#EF6077;'></span>" +
                        params[1].seriesName +
                        ":" +
                        params[1].value;
                    return text;
                },
                backgroundColor: "rgba(0,0,0,0.6)",
                borderWidth: 0,
                textStyle: {
                    color: "#fff",
                },
            },

            color: ["#576B95", "#EF6077"],
            grid: {
                show: true,
                left: "0%",
                right: "1%",
                bottom: "1%",
                top: "4%",
                containLabel: true,
                borderColor: "#f5f5f5",
            },
            xAxis: {
                type: "category",
                show: true,
                boundaryGap: true,
                data: [
                    "2020年5月",
                    "2020年6月",
                    "2020年7月",
                    "2020年8月",
                    "2020年9月",
                    "2020年10月",
                    "2020年11月",
                    "2020年12月",
                    "2021年1月",
                    "2021年2月",
                    "2021年3月",
                    "2021年4月",
                ],
                axisLabel: {
                    formatter(value) {
                        return value.split("年")[1];
                    },
                    interval: 0,
                },
                axisLine: {
                    show: true,
                },
                axisTick: {
                    show: true,
                    alignWithLabel: true,
                    inside: true,
                    length: 5000,
                    lineStyle: {
                        color: "#E8E8E8",
                        type: "dotted",
                    },
                },
            },
            yAxis: {
                type: "value",
                show: true,
                axisLabel: {
                    formatter: "",
                },
            },
            series: [
                {
                    name: "优点",
                    type: "line",
                    symbol: "circle",
                    data: [52, 60, 45, 43, 55, 65, 71, 53, 41, 54, 39, 62],
                },
                {
                    name: "缺点",
                    type: "line",
                    symbol: "circle",
                    data: [48, 40, 55, 57, 45, 35, 29, 47, 59, 46, 61, 38],
                },
            ],
        };
        this.option2 = {
            tooltip: {
                trigger: "axis",
                formatter: function(params) {
                    let text =
                        params[0].axisValue +
                        "<br><span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#576B95;'></span>" +
                        params[0].seriesName +
                        ":" +
                        params[0].value;
                    return text;
                },
                backgroundColor: "rgba(0,0,0,0.6)",
                borderWidth: 0,
                textStyle: {
                    color: "#fff",
                },
            },

            color: ["#0079FE"],
            grid: {
                show: true,
                left: "0%",
                right: "1%",
                bottom: "1%",
                top: "4%",
                containLabel: true,
                borderColor: "#f5f5f5",
            },
            xAxis: {
                type: "category",
                show: true,
                boundaryGap: true,
                data: [
                    "2020年5月",
                    "2020年6月",
                    "2020年7月",
                    "2020年8月",
                    "2020年9月",
                    "2020年10月",
                    "2020年11月",
                    "2020年12月",
                    "2021年1月",
                    "2021年2月",
                    "2021年3月",
                    "2021年4月",
                ],
                axisLabel: {
                    formatter(value) {
                        return value.split("年")[1];
                    },
                    interval: 0,
                },
                axisLine: {
                    show: true,
                },
                axisTick: {
                    show: true,
                    alignWithLabel: true,
                    inside: true,
                    length: 5000,
                    lineStyle: {
                        color: "#E8E8E8",
                        type: "dotted",
                    },
                },
            },
            yAxis: {
                type: "value",
                show: true,
                axisLabel: {
                    formatter: "",
                },
            },
            series: [
                {
                    name: "薪资",
                    type: "line",
                    symbol: "circle",
                    data: [18000, 20000, 22000, 17000, 15000, 20000, 25000, 26000, 23000, 19000, 20500, 21000],
                },
            ],
        };
        this.option3 = {
            tooltip: {
                trigger: "axis",
                formatter: function(params) {
                    let text =
                        params[0].axisValue +
                        "<br><span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#576B95;'></span>" +
                        params[0].seriesName +
                        ":" +
                        params[0].value;
                    return text;
                },
                backgroundColor: "rgba(0,0,0,0.6)",
                borderWidth: 0,
                textStyle: {
                    color: "#fff",
                },
            },

            color: ["#FD7606"],
            grid: {
                show: true,
                left: "0%",
                right: "1%",
                bottom: "1%",
                top: "4%",
                containLabel: true,
                borderColor: "#f5f5f5",
            },
            xAxis: {
                type: "category",
                show: true,
                boundaryGap: true,
                data: [
                    "2020年5月",
                    "2020年6月",
                    "2020年7月",
                    "2020年8月",
                    "2020年9月",
                    "2020年10月",
                    "2020年11月",
                    "2020年12月",
                    "2021年1月",
                    "2021年2月",
                    "2021年3月",
                    "2021年4月",
                ],
                axisLabel: {
                    formatter(value) {
                        return value.split("年")[1];
                    },
                    interval: 0,
                },
                axisLine: {
                    show: true,
                },
                axisTick: {
                    show: true,
                    alignWithLabel: true,
                    inside: true,
                    length: 5000,
                    lineStyle: {
                        color: "#E8E8E8",
                        type: "dotted",
                    },
                },
            },
            yAxis: {
                type: "value",
                show: true,
                axisLabel: {
                    formatter: "",
                },
            },
            series: [
                {
                    name: "薪资",
                    type: "line",
                    symbol: "circle",
                    data: [4000, 2000, 2000, 1000, 5000, 2000, 5000, 6000, 3000, 9000, 500, 1000],
                },
            ],
        };
        // const token = localStorage.getItem("token");
        // if (!token) {
        //     httpRequest.post("登录", { userName: "新新", password: "123456" }).then((res) => {
        //         this.store.dispatch("setAccount", res.data);
        //         localStorage.setItem("token", res.data.token);
        //         httpRequest.post("任务列表", {}).then((res) => {
        //             console.log(res);
        //         });
        //     });
        // } else {
        //     httpRequest.post("任务列表", {}).then((res) => {
        //         console.log(res);
        //     });
        // }
    },
    methods: {
        selectDate(value) {
            console.log(value);
            this.date = util.DateFormat(value, "yyyy年MM月");
            this.showPicker = false;
        },
        cancelDate() {
            this.showPicker = false;
        },
    },
};
</script>

<style lang="less" scoped>
#rateline {
    width: 100%;
    height: 300px;
}
.success-modal {
    width: 630px;
    background: #ffffff;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 30px;
    .icon-close {
        position: absolute;
        right: 20px;
        top: 20px;
    }
    &-content {
        text-align: center;
        > img {
            width: 120px;
        }
        .text {
            font-size: 36px;
            margin: 30px 0;
            color: #000;
        }
        > p {
            font-size: 30px;
            color: #999;
            margin-bottom: 30px;
        }
    }
    &-rate {
        display: flex;
        margin-bottom: 30px;
        > div {
            flex: 1;
            > p {
                font-size: 24px;
                color: #333;
                text-align: center;
                margin-bottom: 15px;
            }
        }
    }
}
.box-title {
    font-size: 30px;
    color: #000;
    text-align: left;
    display: flex;
    align-items: center;
    padding: 20px 0;
    &:before {
        content: " ";
        width: 6px;
        height: 32px;
        background: #288ef4;
        border-radius: 3px;
        margin-right: 15px;
        display: block;
    }
}
.top-btn {
    width: 120px;
}
.evaluation-wish {
    height: 64px;
    line-height: 64px;
    background: #fff3ea;
    border-radius: 8px;
    color: #fe7b07;
    font-size: 26px;
    margin: 20px;
}
.user-rate {
    padding: 20px;
    background: #f5f8fd;
    margin-top: 20px;
    &-1 {
        display: flex;
        > div {
            flex: 1;
            p {
                font-size: 26px;
                color: #4571a5;
                text-align: center;
                margin-bottom: 15px;
            }
        }
    }
    &-2 {
        padding: 0 20px;
        margin-top: 20px;
    }
    &-3 {
        display: flex;
        margin-top: 20px;
        > div {
            flex: 1;
            text-align: left;
            .title {
                font-size: 24px;
                color: #333333;
                margin-bottom: 15px;
            }
            .content {
                font-size: 24px;
                color: #424b61;
            }
        }
        .merits-text {
            margin-right: 10px;
            background: rgba(235, 56, 56, 0.08);
            padding: 10px;
        }
        .demerits-text {
            background: rgba(204, 204, 204, 0.24);
            padding: 10px;
        }
    }
}
.user-rate-title {
    font-size: 32px;
    margin: 30px 0;
    text-align: center;
}

.evaluation-money {
    display: flex;
    align-items: center;
    padding: 20px 20px 0 20px;
    label {
        white-space: nowrap;
        font-size: 30px;
        color: #000;
        margin-right: 20px;
        text-align: left;
        span {
            color: #666;
            font-size: 24px;
        }
    }
}
.self-evaluation {
    margin-bottom: 140px;
    position: relative;
    .evaluation-top {
        background: #fff;
    }
    .user-top {
        padding: 34px 20px;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        align-items: center;
        .user-avatar {
            width: 80px;
            height: 80px;
            flex-shrink: 0;
            margin-right: 20px;
            img {
                width: 100%;
                height: 100%;
                border-radius: 8px;
            }
        }
        .user-info {
            flex-grow: 1;
            text-align: left;
            h3 {
                font-size: 32px;
                line-height: 1;
                span {
                    font-size: 26px;
                    margin-left: 20px;
                }
            }
            p {
                font-size: 24px;
                color: #999;
                line-height: 1;
                margin-top: 15px;
                span {
                    color: #666;
                    float: right;
                }
            }
        }
    }

    .last-month {
        padding: 30px 20px;
    }
    .evaluation-rates {
        .box-title {
            margin: 0 20px;
            padding-top: 0;
        }
        .evaluation-rate {
            border-top: 1px solid #e8e8e8;
            padding: 0 30px;
            margin-top: 30px;
            .form-title {
                font-size: 30px;
                color: #333;
                font-weight: bold;
                margin-right: 40px;
                text-align: left;
                span {
                    color: #ff3b30;
                }
            }
            .evaluation-rate-star {
                display: flex;
                align-items: center;
                border-bottom: 1px solid #e8e8e8;
                padding: 40px 0;
            }
            .evaluation-rate-input {
                padding: 30px 0 20px 0;
                .form-title {
                    margin-bottom: 20px;
                }
            }
            &-message {
                font-size: 24px;
                color: #ccc;
                margin-top: 30px;
            }
        }
    }
    .evaluation-work {
        .box-title {
            margin: 0 20px;
            padding-top: 0;
        }
        .evaluation-task {
            border-top: 1px solid #e8e8e8;
            border-bottom: 1px solid #e8e8e8;
            margin-top: 20px;
        }
    }
    .evaluation-recruit {
        .box-title {
            margin: 0 20px;
            padding-top: 0;
        }
        .recruit-table {
            margin-top: 20px;
            padding: 20px;
            border-top: 1px solid #e8e8e8;
        }
    }
    .evaluation-reward {
        .box-title {
            margin: 0 20px;
            padding-top: 0;
        }
        .evaluation-task {
            border-top: 1px solid #e8e8e8;
            border-bottom: 1px solid #e8e8e8;
            margin-top: 20px;
        }
    }
}
.evaluation-box {
    margin-top: 20px;
    background: #fff;
    padding: 30px 0;
}
</style>
